<template>
  <div>
    <centerHeader :title="header"></centerHeader>
	  <div class="container">
    
    <!--top-->
    <div class="top">
      <div class="top-left">
        <div class="block">
          <!--<span class="demonstration">{{dataTime}}</span>-->
          <el-date-picker
            v-model="dataTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy - MM - dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions2">
          </el-date-picker>
        </div>
      </div>
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      <div class="top-right">已充值总额：{{sum_moeny}},笔数：{{count_money}}</div>
    </div>
    <div class="main">
      <div class="searchOrder">
        <el-input
          placeholder="请输入订单号搜索"
          v-model="order">
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchOrder">搜索</el-button>
      </div>
      <!--tab-->
      <div class="tab">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="order" label="商户单号" align="center"></el-table-column>
            <el-table-column prop="nickname" label="用户" align="center"></el-table-column>
            <el-table-column prop="money" label="金额" align="center"></el-table-column>
            <el-table-column prop="pay_status" label="订单状态" align="center">
              <template slot-scope="scope">
                <!-- 随便你自定义，通过（scope.row）拿到当前行数据-->
                <!--<div :class="">{{scope.row.pay_status==0?'已支付':scope.row.pay_status==1?'待支付':scope.row.pay_status==2?'未支付':scope.row.pay_status==3?'已关闭':''}}</div>-->
                <div :class="statusText[scope.row.pay_status][0]">{{statusText[scope.row.pay_status][1]}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="datetime" label="创建日期" align="center"></el-table-column>
            <el-table-column prop="pay_source_type" label="来源" align="center">
              <template slot-scope="scope">
                <div>{{statusType[scope.row.pay_source_type][0]}}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="待支付" name="second">
          <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="order" label="商户单号" align="center"></el-table-column>
            <el-table-column prop="nickname" label="用户" align="center"></el-table-column>
            <el-table-column prop="money" label="金额" align="center"></el-table-column>
            <el-table-column prop="pay_status" label="订单状态" align="center">
              <template slot-scope="scope">
                <!-- 随便你自定义，通过（scope.row）拿到当前行数据-->
                <!--<div :class="">{{scope.row.pay_status==0?'已支付':scope.row.pay_status==1?'待支付':scope.row.pay_status==2?'未支付':scope.row.pay_status==3?'已关闭':''}}</div>-->
                <div :class="statusText[scope.row.pay_status][0]">{{statusText[scope.row.pay_status][1]}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="datetime" label="创建日期" align="center"></el-table-column>
            <el-table-column prop="pay_source_type" label="来源" align="center">
              <template slot-scope="scope">
                <div>{{statusType[scope.row.pay_source_type][0]}}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已支付" name="third">
          <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="order" label="商户单号" align="center"></el-table-column>
            <el-table-column prop="nickname" label="用户" align="center"></el-table-column>
            <el-table-column prop="money" label="金额" align="center"></el-table-column>
            <el-table-column prop="pay_status" label="订单状态" align="center">
              <template slot-scope="scope">
                <!-- 随便你自定义，通过（scope.row）拿到当前行数据-->
                <!--<div :class="">{{scope.row.pay_status==0?'已支付':scope.row.pay_status==1?'待支付':scope.row.pay_status==2?'未支付':scope.row.pay_status==3?'已关闭':''}}</div>-->
                <div :class="statusText[scope.row.pay_status][0]">{{statusText[scope.row.pay_status][1]}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="datetime" label="创建日期" align="center"></el-table-column>
            <el-table-column prop="pay_source_type" label="来源" align="center">
              <template slot-scope="scope">
                <div>{{statusType[scope.row.pay_source_type][0]}}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="已关闭" name="fourth">
          <el-table :data="tableData" stripe style="width: 100%;">
            <el-table-column prop="order" label="商户单号" align="center"></el-table-column>
            <el-table-column prop="nickname" label="用户" align="center"></el-table-column>
            <el-table-column prop="money" label="金额" align="center"></el-table-column>
            <el-table-column prop="pay_status" label="订单状态" align="center">
              <template slot-scope="scope">
                <!-- 随便你自定义，通过（scope.row）拿到当前行数据-->
                <!--<div :class="">{{scope.row.pay_status==0?'已支付':scope.row.pay_status==1?'待支付':scope.row.pay_status==2?'未支付':scope.row.pay_status==3?'已关闭':''}}</div>-->
                <div :class="statusText[scope.row.pay_status][0]">{{statusText[scope.row.pay_status][1]}}</div>
              </template>
            </el-table-column>
            <el-table-column prop="datetime" label="创建日期" align="center"></el-table-column>
            <el-table-column prop="pay_source_type" label="来源" align="center">
              <template slot-scope="scope">
                <div>{{statusType[scope.row.pay_source_type][0]}}</div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <div class="block page" v-if="showPagesize">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pagesize"
            layout="total, prev, pager, next, jumper"
            :total="count_num">
          </el-pagination>
        </div>
      </el-tabs>
      <!--分页-->
      
      </div>
    </div>
  </div>
  </div>
</template>
<script>
  import centerHeader from '../../components/center-header';
	export default {
		data() {
			return {
        header: [
          { title: "订单管理", path: "/home/order"},
        ],//导航
        d_id:'',
			  topData:[],
        tableData: [],
        sum_moeny:0,
        count_money:0,
        activeName:'first',
        dataTime:[],//日期
        order:'',//要搜索的订单号
        showPagesize:true,//默认显示分页
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        currentPage:1,//分页
        pagesize:10,//每页条数
        count_num:0,
        statusText: {
          1: ['status0', '已支付'],
          0: ['status1', '待支付'],
          2: ['status2', '已关闭'],
        },//显示状态
        statusType:{
			    0:['未知'],
          1:['推广'],
          2:['活动']
        }
			}
		},
		//计算属性
		computed: {},
		//监听
		watch: {},
		//函数集，自己封装，便于开发使用
		methods: {
      handleClick(tab,event){
        console.log(tab.name);
        if(tab.name=="first"){
          this.status=-1;
        }else if(tab.name=="second"){
          this.status=0;
        }else if(tab.name=="third"){
          this.status=1;
        }else if(tab.name=="fourth"){
          this.status=2;
        }
        this.currentPage=1;
        // console.log(this.dataTime);
        if(!this.dataTime){
          this.dataTime=[];
          // console.log(this.dataTime);
          this.getTablelist(1,this.dataTime);
        }else{
          this.getTablelist(1,this.dataTime);
        }
        
      },
      //根据日期查询
      search(){
        this.getTablelist(1,this.dataTime);
      },
      //根据订单商号查询
      searchOrder(){
        this.getTablelist(1,this.dataTime,this.order);
      },
		  //分页
      handleSizeChange(val){
        // console.log(`每页: ${val} 条`);
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.getTablelist(val,this.dataTime,this.order);
      },
		  getTablelist(currentPage,dataTime,order){
        if(!dataTime){
          dataTime=[];
        }
        // console.log(dataTime);
		    let that=this;
        that.showPagesize=true;
		    that.axios.post('/cp/v1/manage/getIndex',{
		      d_id:that.d_id,
          status:that.status,
          page:currentPage,
          start:dataTime[0]|| "",
          end:dataTime[1]|| "",
          seach:order
        })
          .then(function (res) {
            if(res.data.code==200){
              //总金额，笔数
              that.sum_moeny=res.data.data.sum_moeny;
              that.count_money=res.data.data.count_money;
              //数据总条数
              that.count_num=res.data.data.total;
              //数据列表
              that.tableData=res.data.data.tot;
              // console.log(that.tableData);
            }else{
              // console.log(res.data.code);
              if(res.data.code==400){
                that.tableData=[];
                that.showPagesize=false;
              }
            }
            
          })
          .catch(function (err) {
            console.log(err);
          })
      }
    },
		//生命周期钩子：实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用
		beforeCreated() {
		},
		//生命周期钩子：组件实例完成创建之后调用
		created() {
      this.d_id=JSON.parse(localStorage.getItem('userInfo')).user_id;
      // console.log(this.dataTime);
		  this.getTablelist(1,this.dataTime);
		},
		//生命周期钩子：组件实例渲染完成时调用
		mounted() {
		},
		//要用到哪些子组件（如果组件已是最小粒度，那么可省略该属性）
		components: {
        centerHeader
    }
	}
</script>
<style scoped>
  .container{
    box-sizing: border-box;
    padding: 30px;
  }
  .top{
    display: flex;
    flex-direction: row;
    padding-bottom: 10px;
  }
  .top-right{
    line-height: 40px;
    margin-left: 20px;
  }
  .main{
    position: relative;
  }
  
  .searchOrder{
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: row;
    z-index: 4000;
  }
.status0,.status1,.status2{
  width: 100px;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #0ace25;
  color: #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
.status1{
  background-color: #ff9933;
}
.status2{
  background-color: #cccccc;
}
.page{
  display: flex;
  justify-content: center;
  align-items:center;
  margin-top: 10px;
}
</style>
